<template>
  <Container>
    <div class="bg-light">
        <Tabs >
          <TabPane label="个人信息" name="tab1">
            <Form :label-width="160" ref="form" :rules="rule" :model="form">
              <FormItem label="用户名" prop="name">
                {{form.username}}
              </FormItem>
              <FormItem label="真实姓名" prop="real_name">
                <Input v-model="form.real_name" :maxlength="15" class="w200"/>
              </FormItem>
              <FormItem label="手机号" >
                {{form.phone}}
              </FormItem>
              <FormItem label="邮箱" prop="emai" >
                <Input v-model="form.emai" :maxlength="30" class="w200"/>
              </FormItem>
              <FormItem label="头像" prop="imgPath">
                <PictureEditItem :uploadList="uploadList" :maxlength="1" upLoadType="image" @uploadPic="uploadPic"></PictureEditItem>
              </FormItem>
              <FormItem label="我的团队: " prop="type">
                {{companyList}}
                <!-- <Select class="w200" v-model="form.type" filterable clearable placeholder="请选择状态" >
                  <Option
                    v-for="item in list"
                    :key="item.type"
                    :label="item.name"
                    :value="item.type">
                  </Option>
                </Select> -->
              </FormItem>
            </Form>
          </TabPane>
        </Tabs>
    </div>
    <div class="container-footer bg-white" slot="footer">
      <Button type="warning" size="large" class="ml" @click="onEditPassword">修改密码</Button>
      <Button type="primary" size="large" class="ml" @click="onPrevertion">保存用户信息</Button>
    </div>
    <Loader :status="status" @refresh="getData"></Loader>
    <EditPassword ref="password"></EditPassword>
  </Container>
</template>
<script>
const phoneValid = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入电话号码'))
  } else if (!(/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$|^0\d{2,3}-?\d{7,8}$/.test(value))) {
    callback(new Error('请输入正确格式的电话号码'))
  } else {
    callback()
  }
}
import PictureEditItem from "@/components/PictureEditItem"
import EditPassword from './edit/EditPassword'
export default {
  components: {
    PictureEditItem,
    EditPassword
  },
  data() {
    return {
      form: {
        username: '',
        real_name: '',
        phone: '',
        imgPath: '',
        companyList: [],
        emai: ''
      },
      rule: {
        real_name: [{required: true, message: '请输入真实姓名', trigger: 'blur'}],
        phone: [{required: true, validator: phoneValid,  trigger: 'blur'}],
        imgPath: [{ required: true, message: "请上传头像", trigger: "blur" }],
        emai: [
          { required: true, message: '邮箱地址不允许为空', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ]
      },
      uploadList: [],
      status: 'pass'
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.status = 'loading'
      this.$ajaxGet('/user/personInfo').then(data => {
        this.status = 'pass'
        this.form.real_name = data.real_name
        this.form.username = data.username
        this.form.companyList = data.companyList
        this.form.phone = data.phone
        this.form.emai = data.email
        this.form.imgPath = !data.avatar ? '' : data.avatar 
        this.uploadList = data.avatar ? [{
          imgUrl: data.avatar,
          status: "finished"
        }] : []
      })
    },
    uploadPic(value) {
      this.form.imgPath = value.length > 0 ? value[0].url : "";
    },
    onEditPassword() {
      this.$refs.password.open()
    },
    onPrevertion() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let param = {
            real_name: this.form.real_name,
            avatar: this.form.imgPath,
            email: this.form.emai
          }
          this.$jsonPost('/user/finishInfo', param).then(data => {
            this.$Notice.success({
              title: "编辑成功" 
            })
            this.getData()
          })
        }
      })
    }
  },
  computed: {
    companyList() {
      return this.form.companyList.map(item => item.company_name).join(',')
    }
  }
}
</script>